<!--主页-->
<template>
    <div class="body-bac-container">
        <div class="sub-body-head">
            <el-menu default-active="0" mode="horizontal"
                     active-text-color="#007cdc" text-color="#303133" @select="selectMenu">
                <el-menu-item index="0">全部</el-menu-item>
                <el-menu-item :index="type.id +''" v-for="type in dynamicTypeList" :key="type.id">{{type.name}}
                </el-menu-item>
            </el-menu>
        </div>
        <div class="dynamic-list-container container">
            <!--左边-->
            <el-row>
                <el-col :span="17" class="col-left">
                    <div class="bac-container-none-padding">
                        <filter-box :data="filterData" :other-data="otherData" @change="paramsChange"></filter-box>

                    </div>


                    <div class="col-right-container " v-infinite-scroll="load" infinite-scroll-distance="100" infinite-scroll-delay="500">
                        <dynamic-mini-container :data="dynamic" v-for="(dynamic,index) in dynamicList"
                                                :key="index"
                                                v-on:openComplaintDialog="openComplaintDialog"></dynamic-mini-container>
                        <el-alert
                                v-if="dynamicList.length > 0 || loading"
                                :title="loading == false && loadFlag == false ? '没有更多了' : '加载中...'"
                                center
                                :closable="false"
                                type="success">
                        </el-alert>
                        <el-alert
                                v-else
                                title="暂无搜索结果"
                                center
                                :closable="false"
                                type="success">
                        </el-alert>
                    </div>

                </el-col>
                <!--右边-->
                <el-col :span="7" class="col-right">
                    <div :class="isFixeds ? 'left-fixed' : ''">

                        <div class="bac-container-none-padding" v-if="dynamicTypeList.length > 0">
                            <div class="bac-container-title">发布</div>
                            <div class="add-dynamic-type">
                                <el-link :underline="false" :type="type.iconType" :href="'#/add-dynamic?type='+type.id"
                                         v-for="type in dynamicTypeList" :key="type.id" v-if="type.state == 1">
                                    <i :class="type.icon"></i><span>{{type.name}}</span>
                                </el-link>
                            </div>
                        </div>

                        <div class="left-container bac-container-none-padding" v-if="recommendList.length > 0">
                            <div class="bac-container-title-border">猜你感兴趣</div>
                            <ul class="dynamic-list-mini">
                                <li v-for="(dynamic,index) in recommendList" :key="index"  @click="openDynamicDetails(dynamic.id)">
                                    <div class="title-div">
                                        <el-tag type="warning" size="mini" effect="plain" v-if="dynamic.typeName">{{dynamic.typeName}}</el-tag>
                                        <span class="title">{{dynamic.title}}</span>  </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <!--投诉-->
            <el-dialog title="投诉" :visible.sync="complaintDialogVisible" width="40%" center>
                <el-form label-width="100px" size="mini">
                    <el-form-item label-width="0">
                        <el-checkbox label="虚假内容" name="type"></el-checkbox>
                        <el-checkbox label="侵权" name="type"></el-checkbox>
                        <el-checkbox label="网络暴力" name="type"></el-checkbox>
                        <el-checkbox label="色情" name="type"></el-checkbox>
                        <el-checkbox label="反动" name="type"></el-checkbox>
                        <el-checkbox label="其他" name="type"></el-checkbox>
                    </el-form-item>
                    <el-form-item label-width="0">
                        <el-input type="textarea" placeholder="备注内容"></el-input>
                    </el-form-item>
                    <el-form-item label-width="0">
                        <el-alert title="上述内容仅对【商友会】工作人员可见，可帮助我们公共维护一个干净和谐的商务交流环境" type="success" :closable="false">
                        </el-alert>
                    </el-form-item>
                </el-form>
                <span slot="footer">
                <el-button @click="complaintDialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="complaintDialogVisible = false" size="mini">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import dynamicMiniContainer from '@/components/dynamic-mini-container.vue'
    import filterBox from '@/components/filter-box.vue'
    import common from '@/api/common';
    import util from '@/utils/commonUtil';

    export default {
        components: {
            "dynamic-mini-container": dynamicMiniContainer,
            "filter-box": filterBox
        },
        data: function () {
            return {
                loading: false,
                isLogin: false,
                loadFlag: false,
                isFixeds: false,
                filterData: [{
                    name: "行业",
                    sublist: []
                },
                    {
                        name: "地区",
                        sublist: []
                    }],
                otherData: [
                    {
                        name: "排序",
                        sublist: [
                            {
                                code: "",
                                name: "综合"
                            },
                            {
                                code: "time",
                                name: "按时间"
                            },
                            {
                                code: "hot",
                                name: "按热度"
                            }
                        ],
                    }
                ],
                complaintDialogVisible: false,//投诉框
                dynamicList: [],
                dynamicTypeList: [],
                recommendList: [],
                params: {
                    likeStr: "",
                    page: 1,
                    size: 3,
                    count: 0
                }

            }

        },
        methods: {
            getInitData() {
                common.industryCategoryQueryAll().then(res => {
                    this.filterData[0].sublist = res.data;
                });
                common.areaQueryAll().then(res => {
                    this.filterData[1].sublist = res.data;
                });
                common.dictionaryTypeQueryList(1).then(res => {
                    this.dynamicTypeList = res.data;
                });

            },
            initData() {
                let tempIndex = this.menuIndex;
                this.loading = true;
                this.$post("/dynamic/queryPage", this.params).then(res => {
                    if(this.menuIndex != tempIndex){
                        this.loading = false;
                        return;
                    }
                    this.params.count = res.data.count;
                    if (res.data.rows == null || res.data.rows.length == 0) {
                        this.loading = false;
                        this.loadFlag = false;
                        return;
                    }
                    this.dynamicList = this.dynamicList.concat(res.data.rows);
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },
            load() {
                if (this.loading || (this.loadFlag == false && this.params.count == this.dynamicList.length)) {
                    return;
                }
                this.params.page++;
                this.initData();
            },
            selectMenu(index) {
                if (index > 0) {
                    this.params.type = index;
                } else {
                    this.params.type = '';
                }

                this.params.page = 0;
                this.loadFlag = true;
                this.loading  = false;
                this.dynamicList = [];
                this.load();

            },
            openComplaintDialog() {
                this.complaintDialogVisible = !this.complaintDialogVisible;
            },
            paramsChange(r, o, likeStr) {
                this.params = {
                    page: 1,
                    size: 3,
                    count: 0,
                    type: this.params.type
                }
                if (r[0].length > 0 && r[0][0]) {
                    this.params.parentCategoryCode = r[0][0].code
                }
                if (r[0].length > 0 && r[0][1]) {
                    this.params.subCategoryCode = r[0][1].code
                }
                if (r[1].length > 0 && r[1][0]) {
                    this.params.provinceCode = r[1][0].code
                }
                if (r[1].length > 0 && r[1][1]) {
                    this.params.cityCode = r[1][1].code
                }
                if (o != null && o[0]) {
                    this.params.sortField = o[0].code;
                }
                this.loadFlag = true;
                this.params.likeStr = likeStr;
                this.dynamicList = [];
                this.initData();

            },
            getRecommendList() {
                this.$post("/dynamic/getRecommendList").then(res => {
                    this.recommendList = res.data;
                    this.recommendList .rows.forEach(u => {
                        u.userHeadUrl =util.setDefaultHead(u.userHeadUrl);
                    })
                }).catch(() => {
                })
            },
            handleScroll() {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                if (scrollTop > 500) {//提前判断要上升多少像素就固定
                    this.isFixeds = true;
                } else {
                    this.isFixeds = false;
                }
            },
            openDynamicDetails(id) {
                let routeData =  this.$router.resolve({
                    path:"/dynamic-details",
                    query:{ id : id}
                });
                window.open(routeData.href, '_blank');
            }
        },
        mounted() {
            this.getInitData();
            this.initData();
            this.getRecommendList();
            window.addEventListener('scroll', this.handleScroll)
        }
    }
</script>

<style>


    /**
    过滤
    **/
    .dynamic-list-container {
        margin-top: 42px;
    }



    /**
    登陆
    **/
    .dynamic-list-container .login-title {
        line-height: 30px;
        margin-bottom: 15px;
        font-size: 15px;
        font-weight: 600;
    }

    .dynamic-list-container .login-container {
        margin-bottom: 10px;
        padding: 20px 20px 0px;
    }


    /**
推荐列表
*/
    .dynamic-list-container .dynamic-list-mini {
        padding: 0px 10px 10px;
        margin: 0;
    }

    .dynamic-list-container .dynamic-list-mini .el-tag {
        margin-right: 5px;
    }
    .dynamic-list-container .dynamic-list-mini .title-div {
        line-height: 28px;
        overflow: hidden;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        cursor: pointer;

    }
    .dynamic-list-container .dynamic-list-mini .title {
        font-size: 13px;
        font-weight: 600;
    }
    .dynamic-list-container .dynamic-list-mini .title:hover{
        color: #1387E9;
    }


    .add-dynamic-type .el-link--inner {
        font-size: 14px;
        margin: 10px 16px;
        text-align: center;
        vertical-align: middle;
    }

    .add-dynamic-type .el-link--inner span {
    }

    .add-dynamic-type i {
        font-size: 34px;
        display: block;
    }

</style>
